<template>
  <view class="good-item" @click="emit('jump')">
    <view class="flex gap-2 items-start w-full box-border">
      <!-- 商品图片 -->
      <image 
        class="w-80 h-80 bg-gray-300 rounded-lg flex-shrink-0" 
        mode="aspectFill" 
        :src="props.src"
      />

      <!-- 商品信息 -->
      <view class="flex-1 space-y-1 overflow-hidden">
        <!-- 商品标题和编号 -->
        <view class="space-y-2">
          <view class="flex items-center gap-2 text-gray-700">
            <text class="truncate">服务项目编号：{{ props.obj.id || 'WG03043' }}</text>
          </view>
        </view>

        <view class="flex items-center justify-between gap-2 text-gray-700">
          <text class="truncate flex-1">{{ props.obj.goods_name || props.obj.type_name || props.obj.typeName || '服务项目' }}</text>
        </view>

        <view class="flex items-center justify-between gap-2 text-gray-700">
          <text class="truncate">预收价格：¥{{ props.obj.pricenew || props.obj.price || 0 }}</text>
        </view>

        <!-- 单位信息 -->
        <view v-if="props.obj.unit" class="flex items-center gap-2 text-gray-700">
          <text class="truncate">单位：{{ props.obj.unit }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';

const emit = defineEmits(['jump']);

const props = defineProps<{
  src: string;
  obj: any;
}>();

onMounted(() => {
  // 组件挂载后的逻辑
});
</script>

<style lang="scss" scoped>
.good-item {
  max-width: 100%;
  margin: 0 auto;
  padding: 16rpx;
  background: white;
  font-size: 18rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 16rpx;
}

.flex {
  display: flex;
}

.gap-2 {
  gap: 8rpx;
}

.items-start {
  align-items: flex-start;
}

.w-full {
  width: 100%;
}

.box-border {
  box-sizing: border-box;
}

.w-80 {
  width: 160rpx;
}

.h-80 {
  height: 160rpx;
}

.bg-gray-300 {
  background-color: #d1d5db;
}

.rounded-lg {
  border-radius: 8rpx;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-1 {
  flex: 1;
}

.space-y-1 > * + * {
  margin-top: 4rpx;
}

.space-y-2 > * + * {
  margin-top: 8rpx;
}

.overflow-hidden {
  overflow: hidden;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 8rpx;
}

.text-gray-700 {
  color: #374151;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
